<template>
	<div class="all2">
		<div style="color: #707070; line-height: 0.5rem; font-size: 0.3rem; font-weight: bold;">
			因运营商政策调整，您当前流量卡将于【本月15日左右】停止服务。为了不影响您的正常使用，我们为您更换以下新的流量套餐，您的<span style="color: #FF1313;">账户余额将自动结转至新卡</span>
		</div>
		<div style="color: #707070; line-height: 0.5rem; font-size: 0.3rem; font-weight: bold;">当前账户余额：
			<span style="color: #FF1313;" v-if="person.money == 0">0.00元</span>
			<span style="color: #FF1313;" v-if="person.money != 0">{{person.money | qu0}}元</span>
		</div>
		<div style="color: #2D3038; padding: 0.4rem 0rem 0.25rem; font-size: 0.32rem; font-weight: bold;">我们将免费为您更换以下套餐</div>
		<div><img src="../../static/img/ka1.png" style="width: 100%;"></div>
		<!-- <div style="display: flex; justify-content: space-between;">
			<div style="color: #5A5A5A; font-weight: bold; font-size: 0.3rem; padding: 0.3rem 0.3rem;">选择要升级的卡</div>
			<div style="color: #5A5A5A; font-weight: bold; font-size: 0.3rem; padding: 0.3rem 0.3rem;">账户余额：<span style="color:#FF3640;">{{person.money}}</span>元</div>
		</div> -->
		
		<!-- <div style="padding: 0.3rem;">
			
			<van-checkbox-group v-model="list"  @change="quxiao">
			  <van-cell-group>
				<div v-for="(item, index) in kalist" clickable :key="index" style="margin-bottom: 0.3rem;">
					<div style="background: #FFFFFF; border-radius: 0.1rem;">
						<div style="display: flex; margin-bottom: 0.3rem; padding: 0.3rem;">
							<div style="margin-right: 0.2rem; height: 0.4rem;">
								<template>
								  <van-checkbox :name="item.iccid" checked-color="#25C55A" />
								</template>
							</div>
							<div>
								<div style="display: flex; margin-bottom: 0.2rem;">
									<div style="color: #666666; font-size: 0.25rem; margin-right: 0.2rem; font-weight: bold;">卡{{index+1}}</div>
									<div style="color: #666666; font-size: 0.25rem;">当前套餐：</div>
									<div style="color: #666666; font-size: 0.25rem;">{{item.packageName}}</div>
								</div>
								<div style="color: #ACACAC;">ICCID：{{item.iccid}}</div>
							</div>
						</div>
					</div>
			      
			    </div>
			  </van-cell-group>
			</van-checkbox-group>
		
			<div style="color: #FF3640;">* 如取消勾选视为弃卡，原卡在月末会停机并注销</div>
		</div> -->

		<div style="background: #FFFFFF; padding: 0.2rem 0.4rem; border-radius: 0.2rem; margin-top: 0.25rem;" v-for="(item,index) in list" :key="index">
			<div class="flexbc" style="margin-bottom: 0.4rem;">
				<div class="flexc">
					<div  style="color: #2D3038; font-size: 0.32rem; font-weight: bold;  margin-right: 0.2rem;">卡{{index+1}}</div>
					<div  style="color: #2D3038; font-size: 0.28rem;">更换信息填写</div>
				</div>
				<div style="color: #B9B9B9; font-size: 0.26rem;">ICCID:{{item.iccid}}</div>
			</div>
			<div style="color: #5E5E5E; font-size: 0.24rem; margin-bottom: 0.4rem; font-weight: bold;">请填写收件信息：</div>
			<van-cell-group>
			  <van-field v-model="item.name" label="身份证姓名：" placeholder="请输入姓名" />
			</van-cell-group>
			<van-cell-group>
			  <van-field v-model="item.idCard" label="身份证号码：" placeholder="请输入身份证号码" />
			</van-cell-group>
			<van-cell-group>
			  <van-field v-model="item.mobile" label="收货联系电话：" placeholder="请输入收货联系电话" />
			</van-cell-group>
			<van-cell-group>
				<div @click="shows(index)" style="line-height: 24px; padding: 10px 0px; text-align: right; background: #FFFFFF; display: flex; position: relative;">
					<div style="width: 100px; color: #444; font-size: 14px;">收件地址：</div>
					<div style="padding-left: 0.2rem; color: #999; font-size: 14px;" v-if="item.addr == '请选择省市区'">{{item.addr}}</div>
					<div style="padding-left: 0.2rem; color: #323233; font-size: 14px;" v-if="item.addr != '请选择省市区'">{{item.addr}}</div>
				</div>
			</van-cell-group>
			<van-cell-group>
			  <van-field v-model="item.addrInfo" label="详细地址：" placeholder="请输入收货地址" />
			</van-cell-group>
			<div v-if="index == 0" style="padding: 0.3rem 0 0.1rem;  font-size: 0.26rem;"><span style="color: #2D3038; ">注：收到卡激活后一周内账户余额将结转到该卡</span></div>
			<div v-if="index == 0 && person.money == 0" style="color: #707070; padding: 0px 0px; font-size: 0.26rem;">当前账户余额：0.00元</div>
			<div v-if="index == 0 && person.money != 0" style="color: #707070; padding: 0px 0px; font-size: 0.26rem;">当前账户余额：{{person.money | qu0}}元</div>
		</div>
		
		
		
		
		<div v-if="!huankaing" @click="huanka" style="background:#FFC234; color: #FFFFFF; text-align: center; margin: 0.3rem 0; padding: 0.2rem; cursor: pointer; border-radius: 0.1rem;">确认提交</div>
		<div v-if="huankaing" style="background:#FFC234; color: #FFFFFF; text-align: center; margin: 0.3rem 0; padding: 0.2rem; cursor: pointer; border-radius: 0.1rem;">提交中...</div>
		<div style="margin: 0.3rem auto; color: #0046FF; text-align: center;" @click="tishi8 = true" v-if="isBackButton">次月不想使用了，点我退账户余额»»</div>
		<van-popup v-model="show" position="bottom" >
			<van-area title="省市区" :area-list="areaList" @confirm="onAddressConfirm" @cancel="show=false" />
		</van-popup>
		<van-popup v-model="tishi9" class="tongzhi">
			<div style="text-align: center; padding-top: 0.2rem; font-size: 0.28rem; font-weight: bold; color: #707070;">证件信息填写重复</div>
			<div style="color: #707070; font-size: 0.26rem; padding:0.6rem 0.4rem 0.4rem;">
				一个证件信息只能领取该套餐一次 请更换其他证件信息填写
			</div>
			<div @click="tishi9 = false" style="background:#FFC234; width: 3rem; color: #FFFFFF; text-align: center; margin: 0.3rem auto; padding: 0.2rem; cursor: pointer; border-radius: 0.1rem;">确认</div>
		</van-popup>
		<van-popup v-model="ing" class='touming'>
			<van-loading size="24px" color="#fff" vertical>加载中...</van-loading>
		</van-popup>
		
		<van-popup v-model="tishi8" class="tongzhi">
			<div style="text-align: center; padding-top: 0.2rem; font-size: 0.28rem; font-weight: bold; color: #707070;">申请退款</div>
			<div style="color: #707070; font-size: 0.26rem; padding:0.6rem 0.4rem 0.4rem;">
				您确定申请退款至微信账户吗？
			</div>
			<div class="tbon flex">
				<div class="cli huang" @click="qianwang">确定</div>
				<div class="cli hui" style="border-right: 1px #EAEAEA solid;" @click="tishi8=false">取消</div>
				
			</div>
		</van-popup>
	</div>
</template>

<script>
	import axios from 'axios'
	import bus from '@/assets/bus.js'
	export default {
		name: 'genghuan',
		data() {
			return {
				list:[],
				list2:[],
				kalist:[],
				name:"",
				mobile:"",
				address2:"请选择省市区",
				address:"",
				yue:"",
				areaList:"",
				show:false,
				index:0,
				person:"",
				tishi9:false,
				ing:true,
				huankaing:false,
				tishi8:false,
				isBackButton:true
			}
		},
		watch: {
			// num:function(newValue, oldValue) {
			//   console.log(newValue, oldValue)
			// }
		},
		computed: {
			// zongjia:function(){
			//   return this.num * 100
			// }
		},
		created() {
			axios.get("https://static.91haoka.cn/area.json")
			  .then((response)=> {
				  this.areaList = response.data;
			  })
			  // this.this.areaList = area
			// this.huoquka()
			// this.getyonghu()
			// this.getbalance()
			this.getlist()
			this.getyonghu()
		},
		methods: {
			go:function(url) {
				this.$router.push({
					path:url
				})
			},
			qianwang:function(){
				this.axios.post(this.url+`/work/finalBack/applyBack`)
					.then(response => {
						if(response.data.success == true){
							this.$toast('已申请退款');
							this.$router.push({
								path:'/huankabuok',
								query:{
									qian:this.person.money
								}
							})
						}else{
							this.$toast(response.data.message);
						}
					})
			},
			shows:function(index){
				this.index = index
				this.show = true
			},
			getyonghu:function(){
				this.axios.get(this.url+`/mobile/api/getCountInfo`)
					.then(response => {
						if(response.data.success == true){
							this.person = response.data.result
							
						}else{
							this.$toast(response.data.message);
						}
					})
			},
			getlist:function(){
				this.axios.get(this.url+`/mobile/api/getBandCardList`)
					.then(response => {
						if(response.data.success == true){
							for(let i in response.data.result){
								
								if(response.data.result[i].isBackButton == 0){
									this.isBackButton = false
								}
								if(response.data.result[i].isChangeStatus == 2){
									this.list.push(
										{
											iccid:response.data.result[i].iccid,
											addr:"请选择省市区"
										}
									)
								}
							}
							
							if((this.list == '' || this.list == []) && (response.data.result == '' || response.data.result == [])){
								window.location.href = 'https://www.baidu.com'
							}
							if((this.list == '' || this.list == []) && response.data.result != ''){
								this.go('/')
							}
							this.ing = false
						}else{
							this.$toast(response.data.message);
						}
					})
			},
			quxiao:function(e){
				if(e.length < this.list2.length){
					this.$dialog.confirm({
					  title: '放弃换卡确认',
					  message: '您仅有一次换卡机会，取消勾选表示您放弃该卡更换！',
					  overlay:true,
					  confirmButtonText:'确认放弃',
					  confirmButtonColor:'#f00',
					  cancelButtonText:'取消',
					  cancelButtonColor:'#4fc08d'
					})
					.then(() => {
						this.list2 = e
					})
					.catch(() => {
						this.list = this.list2
					});
				}else{
					this.list2 = e
				}
				
			},
			onAddressConfirm:function(values){
				this.list[this.index].addr = values[0].name + values[1].name + values[2].name
				this.show = false
			},
			
			
			//   <van-field v-model="item.name" label="身份证姓名：" required placeholder="请输入姓名" />
			// </van-cell-group>
			// <van-cell-group>
			//   <van-field v-model="item.idCard" label="身份证号码：" required placeholder="请输入联系电话" />
			// </van-cell-group>
			// <van-cell-group>
			//   <van-field v-model="item.mobile" label="收货号码：" required placeholder="请输入收货号码" />
			// </van-cell-group>
			// <van-cell-group>
			// 	<div @click="shows(index)" style="line-height: 24px; padding: 10px 0px; text-align: right; background: #FFFFFF; display: flex; position: relative;">
			// 		<div style="width: 90px; color: #444; font-size: 14px;"><span style="color: #FF0000; position: absolute; left: 0;">*</span>收件地址：</div>
			// 		<div style="padding-left: 0.2rem; color: #999; font-size: 14px;" v-if="item.addr == '请选择省市区'">{{item.addr}}</div>
			// 		<div style="padding-left: 0.2rem; color: #323233; font-size: 14px;" v-if="item.addr != '请选择省市区'">{{item.addr}}</div>
			// 	</div>
			// </van-cell-group>
			// <van-cell-group>
			//   <van-field v-model="item.addrInfo" requi
			  
			  
			huanka:function(){
				this.huankaing = true
				
				
				if(!this.list[0].name){
					 vant.Toast('请填写卡1正确的身份证姓名！');
					  this.huankaing = false
					 return false
				}
				if(!this.list[0].idCard){
					 vant.Toast('请填写卡1正确的身份证号码！');
					  this.huankaing = false
					 return false
				}
				if(!(/^1[3456789]\d{9}$/.test(this.list[0].mobile))){
					 vant.Toast('请填写卡1正确的收货号码！');
					 this.huankaing = false
					 return false
				}
				if(this.list[0].addr == '请选择省市区' || this.list[0].addr == ''){
					 vant.Toast('请选择卡1收货省市区！');
					  this.huankaing = false
					 return false
				}
				if(!this.list[0].addrInfo || this.list[0].addrInfo.length<4){
					 vant.Toast('请填写卡1详细收货地址！');
					  this.huankaing = false
					 return false
				}
				
				if(this.list[1]){
					if(this.list[1].mobile || this.list[1].name || this.list[1].idCard || (this.list[1].addr != '请选择省市区' && this.list[1].addr != '') || this.list[1].addrInfo){
						
						if(!this.list[1].name){
							vant.Toast('请填写卡2正确的身份证姓名！');
							this.huankaing = false
							return false
						}
						if(this.list[1].idCard == this.list[0].idCard){
							this.huankaing = false
							this.tishi9 = true
							return false
						}
						if(!this.list[1].idCard){
							 vant.Toast('请填写卡2正确的身份证号码！');
							 this.huankaing = false
							 return false
						}
						if(!(/^1[3456789]\d{9}$/.test(this.list[1].mobile))){
							 vant.Toast('请填写卡2正确的收货号码！');
							  this.huankaing = false
							 return false
						}
						if(this.list[1].addr == '请选择省市区' || this.list[1].addr == ''){
							 vant.Toast('请选择卡2收货省市区！');
							 this.huankaing = false
							 return false
						}
						if(!this.list[0].addrInfo || this.list[1].addrInfo.length<4){
							 vant.Toast('请填写卡2详细收货地址！');
							 this.huankaing = false
							 return false
						}
					}else{
						console.log('卡2没填')
					}
				}else{
					console.log('没有卡2')
				}
				
				if(this.list[2]){
					if(this.list[2].mobile || this.list[2].name || this.list[2].idCard || (this.list[2].addr != '请选择省市区' && this.list[2].addr != '') || this.list[2].addrInfo){
						
						if(!this.list[2].name){
							 vant.Toast('请填写卡3正确的身份证姓名！');
							 this.huankaing = false
							 return false
						}
						
						if(!this.list[2].idCard){
							 vant.Toast('请填写卡3正确的身份证号码！');
							 this.huankaing = false
							 return false
						}
						if(this.list[2].idCard == this.list[0].idCard || this.list[2].idCard == this.list[1].idCard){
							this.huankaing = false
							this.tishi9 = true
							return false
						}
						if(!(/^1[3456789]\d{9}$/.test(this.list[2].mobile))){
							 vant.Toast('请填写卡3正确的收货号码！');
							 this.huankaing = false
							 return false
						}
						if(this.list[2].addr == '请选择省市区' || this.list[2].addr == ''){
							 vant.Toast('请选择卡3收货省市区！');
							 this.huankaing = false
							 return false
						}
						if(!this.list[0].addrInfo || this.list[2].addrInfo.length<4){
							 vant.Toast('请填写卡3详细收货地址！');
							 this.huankaing = false
							 return false
						}
					}else{
						console.log('卡3没填')
					}
				}else{
					console.log('没有卡3')
				}
				
				
				axios.post(this.url+`/work/finalChange/add`,this.list[0])
				.then((response)=>{
				    if(response.data.code == 200){
						vant.Toast('卡1提交订单成功！');
						if(this.list[1]){
							if(this.list[1].mobile || this.list[1].name || this.list[1].idCard || (this.list[1].addr != '请选择省市区' && this.list[1].addr != '') || this.list[1].addrInfo){
								axios.post(this.url+`/work/finalChange/add`,this.list[1])
								.then((response2)=>{
								    if(response2.data.code == 200){
										vant.Toast('卡2提交订单成功！');
										if(this.list[2]){
											if(this.list[2].mobile || this.list[2].name || this.list[2].idCard || (this.list[2].addr != '请选择省市区' && this.list[2].addr != '') || this.list[2].addrInfo){
												axios.post(this.url+`/work/finalChange/add`,this.list[2])
												.then((response3)=>{
												    if(response3.data.code == 200){
														vant.Toast('卡3提交订单成功！');
														this.go('/huankaok')
												    }else{
														vant.Toast(response3.data.message);
														this.go('/huankaok')
													}
												})
											}else{
												console.log('卡3没填')
												this.go('/huankaok')
											}
										}else{
											console.log('没有卡3')
											this.go('/huankaok')
										}
								    }else{
										vant.Toast(response2.data.message);
										this.go('/huankaok')
									}
								})
							}else{
								console.log('卡2没填')
								this.go('/huankaok')
							}
						}else{
							console.log('没有卡2')
							this.go('/huankaok')
						}
				    }else{
						vant.Toast(response.data.message);
						this.huankaing = false
					}
				})
			},
			
			
			huoquka:function(){
				this.axios.get(this.url+`/mobile/api/getBandCardList`)
					.then(response => {
						if(response.data.success == true){
							let list = response.data.result
							for(let i in list){
								if(list[i].status == 2 && list[i].isSubmit ==0 ){
									this.list.push(list[i].iccid)
									this.kalist.push(list[i])
								}
							}
							console.log(this.kalist)
						}else{
							this.$toast(response.data.message);
						}
					})
			},
			getyonghu:function(){
				this.axios.get(this.url+`/mobile/api/getCountInfo`)
					.then(response => {
						if(response.data.success == true){
							this.person = response.data.result
						}else{
							this.$toast(response.data.message);
						}
					})
			},
			getbalance:function(){
				axios.get('/api/account/balance').then((response)=>{
				    if(response.data.msg.code == 0){
				        this.yue = parseFloat(response.data.data.balance).toFixed(2)
				    }else{
						vant.Toast(response.data.msg.info);
					}
				})
			},
			//获取url的code用
			getUrlParam:function(name) {   
			    var query = window.location.search.substring(1);
			    var vars = query.split("&");
			    for (var i=0;i<vars.length;i++) {
			            var pair = vars[i].split("=");
			            if(pair[0] == name){return pair[1];}
			    }
			    return(false);
			},
			fukuan:function(){
			    var that = this
			    axios.post(that.links + '/recharge/hua-pay', {money:this.value})
			        .then(response => {
			            if(response.data.msg.code == 0){
			               WeixinJSBridge.invoke(
			                'getBrandWCPayRequest', {
			                     "appId":"wx2d18b51e3875af9a",    
			                     'timeStamp': response.data.data.payInfo.timeStamp,
			                     'nonceStr': response.data.data.payInfo.nonceStr,
			                     'package': response.data.data.payInfo.package,
			                     'signType': 'MD5',
			                     'paySign': response.data.data.payInfo.paySign,
			                },
			                function(res){
			                      if(res.err_msg == "get_brand_wcpay_request:ok" ){} 
			                }); 
			            }else{
			                that.$message.error(response.data.msg.info);
			            }
			        })
			},

		},

	}
</script>

<style scoped lang="less">
	.all2 {
		background: #EDEDED;
		font-size: 0.26rem;
		min-height: 100vh;
		padding:0.5rem 0.3rem;
		.van-cell{ padding: 10px 0;}
		/deep/ .touming{ background: transparent;}
		/deep/ .van-field__label{ color:#444444; text-align: right; width: 100px;}
		/deep/ .van-field__control{ padding-left: 0.2rem;}
		/deep/ .van-cell--required::before {
		    position: absolute;
		    left: 0px;
		    color: #ee0a24;
		    font-size: 14px;
		    content: '*';
		}
		.jli {
			border-bottom: 1px #F1F3F5 solid;
			line-height: 0.5rem;
			padding-bottom: 0.1rem;
			margin-bottom: 0.2rem;
		}
		.tongzhi {
			width: 6.5rem;
			border-radius: 0.1rem;
			opacity: 0.9;
			font-size: 0.28rem;
		
			.ico {
				font-size: 0.28rem;
			}
		
			.tli {
				background: #FFB300;
				text-align: center;
				border-radius: 0.1rem;
				opacity: 0.6;
				width: 2.75rem;
				height: 1.4rem;
				padding: 0.2rem 0;
				flex-wrap: wrap;
				margin-bottom: 0.2rem;
		
				.czli {
					width: 100%;
				}
			}
		
			.tliact {
				opacity: 1;
			}
		
			.talt {
				font-size: 0.24rem;
				color: #93959B;
				padding: 0.2rem 0.4rem;
			}
		
			.tname {
				line-height: 0.95rem;
				border-bottom: 1px #EAEAEA solid;
				font-size: 0.32rem;
				color: #2D3038;
				text-align: center;
				font-weight: bold;
			}
		
			.tcon {
				padding: 0.2rem 0.4rem 0.4rem;
				line-height: 0.48rem;
				flex-wrap: wrap;
			}
		
			.tbon {
				border-top: 1px #EAEAEA solid;
			}
		
			.cli {
				flex: 1;
				text-align: center;
				font-size: 0.28rem;
				line-height: 0.75rem;
				margin: 0.1rem 0;
			}
		}
	}
</style>
